<template>
  <div class="shelf-box" @click="handleToRead(book_id, chapter_id)">
    <van-image :src="image" class="shelf-img" fit="cover" radius="4" lazy-load>
      <template v-slot:loading>
        <van-loading type="spinner" size="20" />
      </template>
    </van-image>
    <div class="shelf-info">
      <div class="shelf-top">
        <div class="shelf-title">
          <div class="name van-ellipsis">
            {{ name }}<span>{{ historyTime }}</span>
          </div>
          <div class="writer van-ellipsis">{{ writer }}</div>
        </div>
        <div class="shelf-tag">
          <span>继续阅读</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="shelf-intro van-ellipsis">上次读到:{{ chapter_name }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, computed } from 'vue'
import { useRouter } from 'vue-router'
import { formatTime } from '@/utils/index'

const props = defineProps({
  name: {
    type: String
  },
  writer: {
    type: String
  },
  chapter_name: {
    type: String
  },
  book_id: {
    type: [String, Number],
    required: true
  },
  image: {
    type: String
  },
  chapter_id: {
    type: [String, Number],
    required: true
  },
  chapter_count: {
    type: Number
  },
  read_time: {
    type: Number
  }
})
const historyTime = computed(() => {
  return formatTime(props.read_time as number)
})
const router = useRouter()
const handleToRead = (book_id: string | number, chapter_id: string | number) => {
  router.push({
    name: 'Read',
    params: {
      book_id,
      chapter_id
    }
  })
}
</script>

<style lang="scss" scoped>
.shelf-box {
  position: relative;
  margin-bottom: 16px;
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: 10px;

  .shelf-img {
    position: absolute;
    height: 72px;
    width: 54px;
    background-repeat: no-repeat;
    box-shadow: 0px 4px 12px 0px rgba(6, 27, 65, 0.16);
  }

  .shelf-info {
    padding: 0 10px 0 70px;
    height: 80px;
    .shelf-top {
      display: flex;
      justify-content: space-between;

      .name {
        font-size: 16px;
        font-family: Alibaba PuHuiTi;
        font-weight: bold;
        color: rgba(6, 27, 65, 0.75);
        margin-bottom: 6px;
        span {
          margin-left: 10px;
          font-size: 12px;
          font-weight: 500;
        }
      }

      .writer {
        font-size: 10px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: rgba(6, 27, 65, 0.35);
        margin-bottom: 15px;
      }

      .shelf-tag {
        font-size: 12px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
      }
    }

    .shelf-intro {
      font-size: 12px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: rgba(6, 27, 65, 0.35);
      margin-bottom: 5px;
    }
  }
}
</style>
